<template>
  <div class="back">
    <el-container>
      <el-header height="10%">
        <div class="header-div">
          <img class="img-title" src="@/assets/img/index/title.png" />
          <div class="header-font">桐庐县江南镇人民政府</div>
        </div>
        <div style="width: 400px; margin-top: 15px; margin-right: 18px">
          <el-input
            v-model="search"
            placeholder="搜索"
            style="width: 380px; position: relative; padding-right: 15px"
            size="small"
            @keyup.enter.native="doSearch"
          >
            <i
              slot="suffix"
              class="el-input__icon el-icon-search"
              @click="doSearch"
              style="position: absolute; right: 15px"
            ></i>
          </el-input>
        </div>
        <div class="user">
          <span class="username">{{ username }}</span>
          <span><el-avatar :size="40" :src="avatar"></el-avatar></span>
        </div>
      </el-header>
      <el-container>
        <el-aside width="10%">
          <div class="left-region">
            <div class="goback" @click="back">
              <img class="img-back" src="@/assets/img/back.png" />
              <span>返回</span>
            </div>
            <div :class="['nav', { active: show[0] }]" @click="showMeet">
              选址踏勘
            </div>
            <div :class="['nav', { active: show[1] }]" @click="showMess">
              审批信息录入
            </div>
            <div :class="['nav', { active: show[2] }]" @click="showMees">
              批后管理
            </div>
          </div>
        </el-aside>
        <el-main>
          <div class="right-region">
            <div class="newMeet" v-show="show[0]">
              <div class="meet-head">
                <div>选址踏勘</div>
                <div class="meet-button-all">
                  <el-button class="meet-button" size="mini">提交</el-button>
                  <el-button class="meet-button" size="mini">保存</el-button>
                </div>
              </div>
              <div class="division"></div>
              <div>
                <div class="T_1">
                  <div class="T_1_1">
                    户主姓名
                    <el-select v-model="value" placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </div>
                  <div class="T_1_2">
                    踏勘时间
                    <el-date-picker
                      v-model="value"
                      type="date"
                      placeholder="选择日期"
                    >
                    </el-date-picker>
                  </div>
                  <el-button type="primary"> 查询 </el-button>
                  <el-button type="primary"> 新建踏勘信息 </el-button>
                </div>
              </div>
            </div>
            <div class="newMess" v-show="show[1]">
              <div class="meet-head">
                <div class="meet-button-all">
                  <el-button class="meet-button" size="mini">提交</el-button>
                  <el-button class="meet-button" size="mini">保存</el-button>
                </div>
              </div>
              <div class="division"></div>

              <table
                class="ground-route-table"
                style="width: 100%; margin-top: 10px; padding: 0"
              >
                <tr>
                  <th rowspan="2">申请户主信息</th>
                  <th>姓名</th>
                  <th>性别</th>
                  <th>身份证号</th>
                  <th>家庭地址</th>
                  <th>申请理由</th>
                </tr>
                <tr>
                  <td>123</td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <!-- <td></td> -->
                </tr>
                <tr>
                  <th rowspan="6">批准宅基地几间房情况</th>
                  <th>宅基地面积</th>
                  <th></th>
                  <th></th>
                  <th>地址</th>
                  <th></th>
                </tr>
                <tr>
                  <th rowspan="2">四至</th>
                  <th>东至</th>
                  <td></td>
                  <th>南至</th>
                  <td></td>
                </tr>
                <tr>
                  <!-- <td>123</td> -->
                  <th>西至</th>
                  <td></td>
                  <th>北至</th>
                  <td></td>
                </tr>
                <tr>
                  <th>现状地类</th>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                </tr>
                <tr>
                  <th>住房建筑面积</th>
                  <td></td>
                  <td></td>
                  <th>建筑层数</th>
                  <td></td>
                </tr>
                <tr>
                  <th>设计相邻关系的，是否已征得相邻权利人同意</th>
                  <td></td>
                  <td></td>
                  <th>建筑高度</th>
                  <td></td>
                </tr>
                <tr>
                  <th rowspan="3">资格审核意见</th>
                  <td colspan="5">
                    该用户符合"一户一宅"标准，符合宅基地资格审核条件，四邻关系处理妥当，可申请宅基地面积为
                    ㎡，拟同意上报
                  </td>
                  <!-- <th ></th> -->
                  <!-- <th ></th> -->
                  <!-- <th >地址</th> -->
                  <!-- <th ></th> -->
                </tr>
                <tr>
                  <th>经办人</th>
                  <td colspan="2"></td>
                  <!-- <td></td> -->
                  <th>负责人</th>
                  <td></td>
                </tr>
                <tr>
                  <th>办理时间</th>
                  <td colspan="2">
                    <el-date-picker
                      v-model="value1"
                      type="date"
                      placeholder="验收日期"
                    >
                    </el-date-picker>
                  </td>
                  <!-- <td></td> -->
                  <th>审批日期</th>
                  <td>
                    <el-date-picker
                      v-model="value"
                      type="date"
                      placeholder="验收日期"
                    >
                    </el-date-picker>
                  </td>
                </tr>
                <tr>
                  <th rowspan="3">规划审核意见</th>
                  <td colspan="5">
                    经审核，该用户申请建房地块符合国土空间规划(含土地利用规划和城乡规划)，现状地类为
                    ,农转用批次 ,规划用途为 ,拟同意上报审批
                  </td>
                  <!-- <th ></th> -->
                  <!-- <th ></th> -->
                  <!-- <th >地址</th> -->
                  <!-- <th ></th> -->
                </tr>
                <tr>
                  <th>经办人</th>
                  <td colspan="2"></td>
                  <!-- <td></td> -->
                  <th>负责人</th>
                  <td></td>
                </tr>
                <tr>
                  <th>办理时间</th>
                  <td colspan="2">
                    <el-date-picker
                      v-model="value1"
                      type="date"
                      placeholder="验收日期"
                    >
                    </el-date-picker>
                  </td>
                  <!-- <td></td> -->
                  <th>审批日期</th>
                  <td>
                    <el-date-picker
                      v-model="value"
                      type="date"
                      placeholder="验收日期"
                    >
                    </el-date-picker>
                  </td>
                </tr>
                <tr>
                  <th rowspan="3">农房审核意见</th>
                  <td colspan="5">
                    该用户已提交农村住房设计方案及图纸，符合相关要求，拟统一上报审批
                  </td>
                  <!-- <th ></th> -->
                  <!-- <th ></th> -->
                  <!-- <th >地址</th> -->
                  <!-- <th ></th> -->
                </tr>
                <tr>
                  <th>经办人</th>
                  <td colspan="2"></td>
                  <!-- <td></td> -->
                  <th>负责人</th>
                  <td></td>
                </tr>
                <tr>
                  <th>办理时间</th>
                  <td colspan="2">
                    <el-date-picker
                      v-model="value1"
                      type="date"
                      placeholder="验收日期"
                    >
                    </el-date-picker>
                  </td>
                  <!-- <td></td> -->
                  <th>审批日期</th>
                  <td>
                    <el-date-picker
                      v-model="value"
                      type="date"
                      placeholder="验收日期"
                    >
                    </el-date-picker>
                  </td>
                </tr>
                <tr>
                  <th rowspan="4">乡镇(街道)划审核意见</th>
                  <td colspan="3" rowspan="4">同意</td>
                  <!-- <th ></th> -->
                  <!-- <th ></th> -->
                  <!-- <th >地址</th> -->
                  <!-- <th ></th> -->
                </tr>
                <tr>
                  <!-- <td></td>
                  <td></td>
                  <td></td>
                  <td></td>-->
                  <td rowspan="2">负责人</td>
                  <td rowspan="2"></td>
                </tr>
                <tr>
                  <!-- <td></td>
                  <td></td>
                  <td></td>
                  <td></td>-->
                  <!-- <td>21</td> -->
                  <!-- <td>21</td>  -->
                </tr>
                <tr>
                  <!-- <td></td>
                  <td></td>
                  <td></td>
                  <td></td>-->
                  <td>审批时间</td>
                  <td>
                    <el-date-picker
                      v-model="value1"
                      type="date"
                      placeholder="验收日期"
                    >
                    </el-date-picker>
                  </td>
                </tr>
              </table>
            </div>
            <div class="newMess" v-show="show[2]">
              <div class="meet-head">
                <div>选址踏勘</div>
                <div class="meet-button-all">
                  <el-button class="meet-button" size="mini">提交</el-button>
                  <el-button class="meet-button" size="mini">保存</el-button>
                </div>
              </div>
              <div class="division"></div>
              <div class="T_1">
                <div>
                  户主姓名
                  <el-select v-model="value3" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value3"
                      :label="item.label"
                      :value="item.value3"
                    >
                    </el-option>
                  </el-select>
                </div>
                <div>
                  踏勘时间
                  <el-date-picker
                    v-model="value4"
                    type="date"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                </div>
                <div class="T_1_1">
                  所在村
                  <el-input type="text" placeholder="所在村" />
                </div>
              </div>
              <div>
                <el-table
                  :data="tableData"
                  style="width: 100%"
                  :row-class-name="tableRowClassName"
                >
                  <el-table-column prop="date" label="序号" >
                  </el-table-column>
                  <el-table-column prop="name" label="户主姓名">
                  </el-table-column>
                  <el-table-column prop="address" label="所在村">
                  </el-table-column>
                  <el-table-column prop="address" label="选址位置">
                  </el-table-column>
                  <el-table-column prop="address" label="发证时间">
                  </el-table-column>
                  <el-table-column prop="address" label="现场踏勘">
                  </el-table-column>
                  <el-table-column prop="address" label="定点放样">
                  </el-table-column>
                  <el-table-column prop="address" label="砌基">
                  </el-table-column>
                  <el-table-column prop="address" label="主体完工">
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: [true, false, false],
      username: "用户名",
      avatar: "",
      search: "", //搜索内容
      option: [],
      value: "",
      value1: "",
      value3:'',
      value4:'',
      tableData:[],
    };
  },
  methods: {
    showMeet() {
      this.show.splice(0, 1, true);
      this.show.splice(1, 1, false);
      this.show.splice(2, 1, false);
    },
    showMess() {
      this.show.splice(0, 1, false);
      this.show.splice(1, 1, true);
      this.show.splice(2, 1, false);
    },
    showMees() {
      this.show.splice(0, 1, false);
      this.show.splice(1, 1, false);
      this.show.splice(2, 1, true);
    },
    //搜索框点击搜索
    doSearch() {
      console.log(this.search);
    },
    back() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.el-header {
  display: flex;
  margin-top: 20px;
  justify-content: space-between;
}
.el-aside {
  height: 20%;
  margin-left: 40px;
  padding: 5px 10px 5px 10px;
  background-color: rgb(60, 136, 172);
  border-radius: 8px;
  overflow: hidden;
  color: white;
}
.el-main {
  height: 95%;
  margin-right: 100px;
  margin-left: 20px;
  border-radius: 10px;
  background-color: white;
}
.back {
  background: url("../../assets/img/background.png");
  background-size: 100% 100%;
  display: flex;
  height: 100%;
  vertical-align: top;
}
.right-region {
  width: 100%;
  height: 98%;
}
.img-title {
  width: 190px;
  height: 190px;
  margin-top: -45px;
  margin-left: -50px;
}
.header-div {
  margin-top: -20px;
  vertical-align: middle;
  display: flex;
}
.header-font {
  font-size: 35px;
  margin-top: 30px;
  margin-left: -50px;
  color: white;
}
.user * {
  font-size: 15px;
  vertical-align: middle;
  margin-top: 10px;
}
.user {
  margin-right: 80px;
}
.nav {
  width: 90%;
  margin: 0 auto;
  text-align: center;
  cursor: pointer;
  margin-bottom: 10px;
  height: 30px;
  line-height: 30px;
  border-radius: 8px;
}
.active {
  background-color: rgb(245, 170, 32);
}
.img-back {
  width: 20px;
  height: 20px;
}
.goback * {
  font-size: 15px;
  vertical-align: middle;
}
.goback {
  width: 90%;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 10px;
}
/* 新建会议第一层样式 */
.meet-head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  margin-bottom: 15px;
}
/* 会议单个按钮样式 */
.meet-button {
  background-color: rgb(60, 136, 172);
  color: white;
  border-radius: 5px;
}
/* 分割线 */
.division {
  width: 100%;
  margin: 0 auto;
  height: 2px;
  background-color: rgb(184, 184, 184);
}
/* 按钮区域样式 */
.meet-button-all {
  margin-right: 60px;
}
.T_1 {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
}
.ground-route-table {
  width: 100%;
  border: 1px solid #000;
  border-collapse: collapse;
}
.ground-route-table td {
  border: 1px solid #000;
}
.ground-route-table th {
  border: 1px solid #000;
}
.el-input--small {
    font-size: 13px;
    width: 70%;
}
.el-table th, .el-table tr {
    background-color: #c1c1c12e  !important;
}
</style>